* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes body {
  0% {
    background-color: green;
  }
  50% {
    background-color: darkgreen;
  }
  100% {
    background-color: green;
  }
}

@keyframes split {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

body {
  .gameRange {
    width: 100%;
    @L: 20px;
    padding: 20px;
    background-color: darkslategrey;

    .data {
      font-size: 20px;

      #score {
        color: red;
      }
    }


    .board {
      background-color: wheat;
      padding: 20px;
      margin: 0 auto;
      width: 60%;

      .line {
        height: @L;

        .box {
          width: @L;
          height: @L;
          //outline: solid 1px;
          float: left;
          //transform: rotate(3rad);
        }


        .user {
          background-color: darkgreen;
          //border-radius: 50%;
          animation-name: enlarge;
          animation-duration: 0.2s;
          animation-iteration-count: infinite;
          //background-image: url("../img/snakeBody.png");
        }

        .userHead {
          background-size: contain;
          //border-radius: 50%;
          background-image: url("../img/snakeBody.png");

        }

        .air {
          //background-color: white;
          outline: none;
        }

        .wall {
          background-color: black;
        }

        .food {
          background-color: lime;

          animation-name: rotate;
          animation-duration: 1s;
          animation-iteration-count: infinite;
        }

        .cleaner {
          background-color: orangered;


          animation-name: rotate;
          animation-duration: 1s;
          animation-iteration-count: infinite;
        }

        .foodPackage {
          background-color: #00ffaa;


          animation-name: rotate;
          animation-duration: 0.5s;
          animation-iteration-count: infinite;
          //animation-timing-function: linear;
        }

        .cutBody {
          background-color: #ea00ff;
          animation-name: rotate;
          animation-duration: 0.5s;
          animation-iteration-count: infinite;
        }
      }
    }

  }
}
